<template>
  <div class="page">
    <sub-header :title="title"></sub-header>
    <div class='main'>
      <ul>
        <li>收货人</li>
        <li><input type="text" placeholder="收货人姓名" v-model="name"/></li>
      </ul>
      <ul>
        <li>联系方式</li>
        <li><input type="text" placeholder="联系人手机号" v-model="cellphone"/></li>
      </ul>
      <ul>
        <li>所在地区</li>
        <li>
          <input type="text" placeholder="请选择收货地址" class='area' @click="isArea=true" readOnly :value="showArea"/>
        </li>
      </ul>
      <ul>
        <li>详细地址</li>
        <li><input type="text" placeholder="街道详细地址" v-model="address"/></li>
      </ul>
      <ul>
        <li>
          <van-checkbox shape="square" :value="true" v-model="isDefault">设置为默认地址</van-checkbox>
        </li>
      </ul>
      <button type="button" class='submit-save' @click="submit">保存</button>
    </div>
    <van-popup v-model="isArea" position="bottom">
      <van-area title="请选择地区" :value="areaCode" :area-list="areaList" @cancel="isArea = false"
                @confirm="confirmSelect"/>
    </van-popup>
  </div>
</template>

<script>
import SubHeader from 'components/SubHeader'
import { mapActions } from 'vuex'
import areaList from '../../../data/area'

export default {
  name: 'address-mod',
  data () {
    return {
      name: '',
      cellphone: '',
      showArea: '',
      address: '',
      isDefault: false,
      isArea: false,
      areaList: areaList,
      province: '',
      city: '',
      area: '',
      areaCode: '',
      title: this.$route.meta.title,
    }
  },
  methods: {
    ...mapActions({
      addressInfo: 'address/addressInfo',
      editAddress: 'address/editAddress'
    }),
    confirmSelect (selected) {
      let area = []
      selected.forEach((item) => {
        area.push(item.name)
      })
      this.province = area[0]
      this.city = area[1]
      this.area = area[2]

      this.showArea = area.join(' ')
      this.isArea = false
    },
    setAddressInfo () {
      this.addressInfo({
        aid: this.aid,
        success: res => {
          if (res.code === 200) {
            this.name = res.data.name
            this.cellphone = res.data.cellphone
            this.showArea = res.data.province + ' ' + res.data.city + ' ' + res.data.area
            this.province = res.data.province
            this.city = res.data.city
            this.area = res.data.area
            this.address = res.data.address
            this.isDefault = res.data.isdefault === '1' ? true : false
            this.setAreaCode()
          } else {
            this.$toast(res.data)
          }
        }
      })
    },
    setAreaCode () {
      let county_list = this.areaList.county_list
      for (let areaCode in county_list) {
        if (county_list[areaCode] === this.area) {
          this.areaCode = areaCode
        }
      }
    },
    async submit () {
      if (this.name.match(/^\s*$/)) {
        this.$toast('请输入收件人姓名')
        return
      }
      if (this.cellphone.match(/^\s*$/)) {
        this.$toast('请输入手机号码')
        return
      }
      if (!this.cellphone.match(/^1\d{10}$/)) {
        this.$toast('您输入的手机号码不正确')
        return
      }
      if (this.showArea.match(/^\s*$/)) {
        this.$toast('请选择所在地区')
        return
      }
      if (this.address.match(/^\s*$/)) {
        this.$toast('请填写详细地址')
        return
      }
      if (this.isSubmit) {
        this.isSubmit = false
        let result = await this.editAddress({
          aid: this.aid,
          name: this.name,
          cellphone: this.cellphone,
          province: this.province,
          city: this.city,
          area: this.area,
          address: this.address,
          isdefault: this.isDefault ? '1' : '0'
        })
        if (result.code === 200) {
          this.$toast({
            message: '修改地址添加成功',
            onClose: () => {
              this.$router.go(-1)
            }
          })
        } else {
          this.$toast(result.data)
        }
      }

    }
  },
  created () {
    this.aid = this.$route.query.aid || ''
    this.isSubmit = true
    this.setAddressInfo()
    document.title = this.title
  },
  components: {
    SubHeader
  }
}
</script>

<style scoped>
  .page {
    width: 100%;
    height: 100vh;
    overflow: hidden;
    background-color: #FFFFFF;
  }

  .main {
    width: 100%;
    margin-top: 1rem;
  }

  .main ul {
    width: 100%;
    height: 1.02rem;
    border-bottom: #EFEFEF 1px solid;
    display: flex;
    display: -webkit-flex;
    align-items: center;
    -webkit-align-items: center;
  }

  .main ul li {
    font-size: 0.32rem;
    margin-left: 0.3rem;
  }

  .main ul li:nth-child(2) {
    width: 62%;
    height: 100%;
  }

  .main ul li input[type='text'] {
    width: 100%;
    height: 95%;
    font-size: 0.32rem;
  }

  .main ul li .area {
    font-size: 0.28rem !important;
  }

  .main ul li input[type='checkbox'] {
    width: 0.4rem;
    height: 0.4rem;
    margin-top: 0.3rem;
  }

  .main .submit-save {
    width: 85%;
    height: 0.8rem;
    background-color: #FCB40A;
    border-radius: 4px;
    margin: 0 auto;
    display: block;
    border: 0 none;
    outline: none;
    font-size: 0.32rem;
    color: #FFFFFF;
    margin-top: 0.4rem;
  }
</style>
